<template>
  <view class="location-box">
    <u-navbar back-text="" title="宿舍坐标定位"></u-navbar>
    <view   class="location-box-inner">
      <view style="width:90%;margin:0 auto;font-size:45rpx;text-align: center;margin-bottom: 100rpx;">{{coordinateTitle2}}</view>
<!--      <u-alert-tips style="margin-bottom: 80rpx;width:90%;margin:0 auto;" type="warning" :title="coordinateTitle2" ></u-alert-tips>-->
        <view class="location-box-inner-circle" @click="init">
          <u-icon name="map-fill" color="#fff" size="150"></u-icon>
          <view class="location-box-inner-circle-text" >获取定位</view>
        </view>
        <view  class="location-box-inner-coordinate">
          <u-alert-tips style="width:90%;margin:0 auto;margin-top: 80rpx;" type="warning" :title="coordinateTitle" ></u-alert-tips>
<!--          <u-alert-tips style="margin-top: 50rpx" type="warning" :title="coordinateTitle2" ></u-alert-tips>-->
        </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "webIndex",
  data(){
    return{
      coordinateTitle:'当前坐标：',
      coordinateTitle2:'',
      dormitoryId:''
    }
  },
  onLoad(query) {
    this.dormitoryId = query.dormitoryId
    this.coordinateTitle2 = '宿舍号：'+ this.dormitoryId
  },
  methods:{
    async init() {
      // uni.chooseLocation({
      //   success: (res) => {
      //     console.log('chooseLocation',res)
      //     if (res.errMsg === 'chooseLocation:ok') {
      //       console.log('位置名称：' + res.name);
      //       console.log('详细地址：' + res.address);
      //       console.log('纬度：' + res.latitude);
      //       console.log('经度：' + res.longitude);
      //     }
      //   }
      // });
      uni.showLoading({
        title: '正在获取坐标点，请稍候...'
      });
      uni.getLocation({
        type: 'wgs84',
        isHighAccuracy:true,
        accuracy: 'best',
        geocode:true,
        success: ((res)=> {
          console.log('wgs84=res',res)
          let latitude = res.latitude;
          let longitude = res.longitude;
          console.log('WGS84 坐标：', latitude, longitude);
          this.wgs84ToBd09(latitude, longitude)
        }),
        fail:(e)=>{
          uni.hideLoading();
        }
      })
    },
    async wgs84ToBd09(lat, lng) {
      let apiKey = 'aoU7EqT6qn2JYQo1BR72IN12oazPpx84'
      const url = `/baidu/geoconv/v1/?coords=${lng},${lat}&from=1&to=5&ak=${apiKey}`;
      uni.request({
        url: url,
        method: 'GET',
        success: async (res) => {
          console.log(res)
          let parm = {
            longitude:res.data.result[0].x,
            latitude:res.data.result[0].y
          }
          this.coordinateTitle = '坐标:' + parm.longitude+','+parm.latitude
          console.log('wgs84ToBd09 坐标：',parm.longitude+','+parm.latitude)
          let { code } = await this.$api.dormitory.updateDormitory({coordinate:parm.longitude+','+parm.latitude,id:this.dormitoryId});
          if (code == 200) {
            uni.hideLoading();
            uni.showToast({title:'宿舍坐标标记成功！',duration:5000})
          }
          uni.hideLoading();
        },
        fail: (err) => {
          uni.hideLoading();
          console.error('请求失败', err);
        }
      });
    },
  }
}
</script>

<style scoped lang="scss">
  .location-box{
    width:100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    .location-box-inner {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      width:100%;
      margin-bottom: 300rpx;
      .location-box-inner-circle{
        width: 440rpx;
        height: 440rpx;
        border-radius: 50%;
        background: #2b85e4;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        .location-box-inner-circle-text{
          font-size: 40rpx;
          color: #fff;
          font-width: 550;
          margin-top: 30rpx;
          letter-spacing:10rpx;
        }
      }
      .location-box-inner-coordinate{
        font-size: 38rpx;
        color: #333333;
        margin-top: 40rpx;
        width:100%;
      }
    }
  }
</style>
